<template>
	<view class="app-nav dir-left-nowrap cross-center main-around">
		<view class="box-grow-1" v-for="(item, index) in list" :key="index" @click="active(item.id)">
			<text
				:class="activeIndex === item.id ? theme +'-m-text ' + theme + ' active': 'no-active'">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-nav',
		props: {
			theme: String
		},
		data() {
			return {
				list: [{
						name: '全部',
						id: 0,
					},
					{
						name: '待付款',
						id: 1,
					},
					{
						name: '拼团中',
						id: 2,
					},
					{
						name: '拼团成功',
						id: 3,
					},
					{
						name: '拼团失败',
						id: 4,
					},
				],
				activeIndex: 0
			}
		},
		methods: {
			active(id) {
				this.activeIndex = id;
				this.$emit('click', id);
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-nav {
		width: #{750rpx};
		height: #{80rpx};
		font-size: #{26rpx};
		color: #666666;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background-color: white;

		>view {
			text-align: center;
		}

		text {
			display: inline-block;
			height: #{80rpx};
			line-height: #{76rpx};
		}
	}

	.active {
		border-bottom: #{4rpx} solid;
	}

	.no-active {
		color: #353535;
		border-bottom: #{4rpx} solid #FFFFFF;
	}
</style>
